<template>
	<div>
		<div class="video">
			<Icons></Icons>
			<div v-for="(item,index) in videolist" class="movie ">
				<div :style="{background: 'url('+ item.data.coverUrl +')'}" class="movie_poster ">
					<div class="player-icon ">
						<img src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4jrh3l7n0payktrjy7yazgqbmoliyyjb9c38c871-213f-42e8-abcc-996a63994f6d" />
					</div>
				</div>
				<div class="M-bottom  flexRow ">
					<div class="M-text  flewCol">
						<div class="V-title flewCenter">{{item.data.title}}</div>
						<div class="V-rec flewCenter">{{cutString(item.data.description)}}</div>
					</div>
					<div class="M-icon flexRow ">
						<!-- 加入喜欢 -->
						<div class="icon-love flewCenter">
							<img class="icon1" referrerpolicy="no-referrer"
								src="https://lanhu.oss-cn-beijing.aliyuncs.com/psvgefnlqgkyvkafiznuhr8kfzzwzi2djn4d348a23-8290-430f-bfac-4a40b60c1710" />
						</div>
						<!-- 转发 -->
						<div class="icon-share flewCenter">
							<img class="label3" referrerpolicy="no-referrer"
								src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqsdc00pbuxk84z1ycl7pipqcjrkitr6acc87d5-77d2-4d58-be74-261493aaff57" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Icons from '../../components/Icons/Icons.vue'
	export default {
		components: {
			Icons
		},
		name: "",
		data() {
			return {
				videolist: []
			}
		},
		created() {

		},
		mounted() {
			//获取推荐视频
			this.getRecvodeo()
		},
		methods: {
			//获取推荐视频
			async getRecvodeo() {
				const {
					data: res
				} = await this.$http.get('/video/timeline/recommend')
				if(res.code!==200){
					this.$message.error('获取视频失败')
				}else{
					this.videolist = res.datas.slice(0,2)
					console.log(this.videolist)
				}
				
			},
			//减少字数
			cutString(str) {
				if (str) {
					if (str.length > 8) {
						return str.substring(0, 8) + '...'
					}
					return str
				}
			
			
			}
		}
	}
</script>

<style>
	.V-title{
		font-weight: 700;
		font-size: 10px;
		
	}
	.V-rec{
		font-size: 15px;
	}
	.icon-love,
	.icon-share {
		margin-right: 18px;
	}

	.M-icon {
		z-index: auto;
		width: 72px;
		height: 18px;
		margin: 0px 0px 0px auto;
	}

	.M-text {
		z-index: auto;
		width: 180px;
		height: 60px;
		justify-content: space-around;
	}

	.M-bottom {
		z-index: auto;
		width: 347px;
		height: 60px;
		margin: 10px auto;
		align-items: center;
	}

	.player-icon {
		z-index: 7;
		width: 47px;
		height: 46px;
	}

	.movie_poster {
		background-repeat:no-repeat !important;
		background-size: contain !important;
		z-index: 6;
		height: 174px;

		margin: 15px auto;
		width: 310px;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.movie {
		margin: 10px auto;
		z-index: auto;
		width: 347px;
		height: 275px;
	}
</style>
